<!--index： 慈善机构的列表页 即首页-->
<!--detail： 每个机构的详细页面-->
<!--about： 介绍-->

<!--三个页面通过组件的显示隐藏实现-->
<template>
  <div id="app">
    <el-container>
      <!--      页头-->
      <el-header class="header">
        <h1 style="text-align:center;color: white;font-size:20px">慈善中国</h1>
      </el-header>
      <!--      index组件-->
      <transition name="el-fade-in-linear">
        <div v-show="isshow">
          <Particles></Particles>
          <Index :isshow=isshow @indexClick="outIndex($event)" style="top:60px;height: calc(100vh - 60px)"></Index>
        </div>
      </transition>
      <!--      detail组件-->
      <transition name="el-fade-in-linear">
        <div v-show="!isshow" >
          <Detail :isshow=isshow :detail_name=detail_name @detailClick="outDetail($event)"  style="top:60px;height: calc(100vh - 60px)"></Detail>
        </div>
      </transition>
      <!--      about组件-->
    </el-container>
  </div>
</template>

<script>
  import Particles from '@/components/Particles'
  import Footer from "@/components/Footer";
  import Index from "@/components/Index";
  import Detail from "@/components/Detail";
  export default {
    name: 'App',
    components: {
      'Particles': Particles,
      'Footer': Footer,
      'Index': Index,
      'Detail':Detail
    },

    data() {
      return {
        isshow: true,
        detail_name: '',
      }
    },methods:{
      // 跳转到index界面
      outIndex(data){
        this.detail_name = data;
        this.isshow=false;
      },
      // 跳转到detail界面
      outDetail(data){
        this.detail_name = '';
        this.isshow = data;
      },
      // 监测移动端
    }}
</script>

<style>
  #app {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .el-container {
    height: 100vh;
  }
  .header {
    background-color: rgb(204, 0, 0);
  }


</style>
